<template>
  <div class="wrap">
    <el-row >
      <el-col :span="24" >
        <div>
          <Table-easy
            :table-data="tableData"
            :table-body="false"
            :is-pagination-show="false">
            <template slot="TableHead">
              <el-row>
                <el-col
                  :span="24"
                  class="search_left">
                  <el-form
                    ref="ruleForm"
                    :model="searchInfo"
                    :inline="true">
                    <el-form-item
                      label="数据点"
                    >
                      <el-input
                        v-model="searchInfo.tag"
                        style="width: 220px;" />
                    </el-form-item>
                    <el-form-item
                      label="卷号"
                    >
                      <el-input
                        v-model="searchInfo.ENTID" 
                        style="width: 150px;"/>
                    </el-form-item>
                    <el-form-item
                      label="类型"
                    >
                      <el-input
                        v-model="searchInfo.CURTYPE" 
                        style="width: 80px;"/>
                    </el-form-item>
                    <el-form-item
                      label="产线">
                      <el-select
                        v-model="searchInfo.line"
                        style="width: 100px!important;"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in option1"
                          :key="item.key"
                          :label="item.name"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      label="日期"
                      prop="dbegin">
                      <el-date-picker
                        v-model="searchInfo.dbegin"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="开始时间"/>
                    </el-form-item>
                    <el-form-item
                      label="日期"
                      prop="dbegin">
                      <el-date-picker
                        v-model="searchInfo.dend"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="结束时间"/>
                    </el-form-item>
                    <el-button
                      size="small"
                      type="primary"
                      @click="findAll()">查询</el-button>
                    
                  </el-form>
                </el-col>
              </el-row>
            </template>
          </Table-easy>
        </div>
        <div 
          v-loading="loadingPort"
          v-for="(item, index) in echartDataArray"
          :key="index"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading" 
          element-loading-background="rgba(16, 31, 68, 0.8)">
          <el-row >
            <el-col 
              :span="4" 
              style="float:right;">
              <el-button
                size="small"
                type="danger"
                class="el-icon-delete"
                @click="deleteOne(index)">删除</el-button>
            </el-col>
          </el-row>
          <nercar-echarts 
            :x-axis="item.xAxis"
            :title="item.title"
            :y-axis="option.yAxis"
            :color="option.color"
            :data-zoom="option.dataZoom"
            :tooltip="option.tooltip"
            :series="item.series"
            _height="280px"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NercarEcharts from '@/components/NercarEcharts.vue'
import TableEasy from '@/components/TasilyTableEasy'
import Echarts from 'echarts'
import { get, post, getDataConfig, exportMethod, derivecloud } from '@/lib/Util'
import moment from 'moment'
export default {
  components: {
    TableEasy,
    NercarEcharts
  },
  data() {
    return {
      loadingPort: false,
      tableData: [],
      searchInfo: {
        tag: 'TCM_EXS5_STRIP_SPEED',
        line: '1',
        CURTYPE: '1',
        ENTID: '53W3G3660000'
      },
      option1: [],
      echartDataArray: [],
      option: {
        backgroundColor: '#323a5e',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ['green', '#FF0000'],
        grid: {
          top: '15%',
          bottom: '8%',
          right: '5%',
          left: '12%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'inside' //内置滑动，随鼠标滚轮展示
            // xAxisIndex: [0],
            // start: 0, //初始化时，滑动条宽度开始标度
            // end: 100 //初始化时，滑动条宽度结束标度
          }
        ],
        legend: {
          data: [],
          left: 10,
          top: 12,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              textStyle: {
                fontFamily: 'Microsoft YaHei'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.3)'
              }
            },
            axisLabel: {},
            scale: true //纵坐标自适应
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            itemStyle: {
              normal: {
                label: {
                  // show: true, //开启显示
                  // position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'white',
                    fontSize: 10
                  }
                }
              }
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.option1 = [
      { value: '1', name: '1870---1' },
      { value: '2', name: '1630---2' },
      { value: '3', name: '2150---3' }
    ] //产线
    this.findAll()
  },
  created() {
    this.$set(
      this.searchInfo,
      'dbegin',
      moment()
        .subtract(10, 'minutes')
        .format('YYYY-MM-DD HH:mm:ss')
    )
    this.$set(this.searchInfo, 'dend', moment().format('YYYY-MM-DD HH:mm:ss'))
  },
  methods: {
    //查询接口
    async findAll(page) {
      this.loadingPort = true
      const diff = moment(this.searchInfo.dend).diff(
        moment(this.searchInfo.dbegin)
      )
      if (diff <= 5400000) {
        // console.log('两个时间相减不大于 5 分钟')
        let res = await post('/api/curveData/getcurveData1870', {
          TAG: this.searchInfo.tag,
          LINE: this.searchInfo.line,
          CURTYPE: this.searchInfo.CURTYPE,
          ENTID: this.searchInfo.ENTID,
          ENTTIME: this.searchInfo.dbegin,
          EXTIME: this.searchInfo.dend
        })

        if (Array.isArray(res.widths) && res.widths.length > 0) {
          this.loadingPort = false
          let datas1 = res.widths
          var need_x1 = []
          var need_y1 = []
          for (var i = 0; datas1.length > i; i++) {
            need_y1.push(datas1[i])
            need_x1.push(i)
          }
          // for (var i = 0; dataX.length > i; i++) {
          //   let newDate = dataX[i].split(' ')[1] + ' ' + dataX[i].split(' ')[2]
          //   need_x1.push(newDate)
          // }
          let xData = [
            {
              type: 'category',
              data: need_x1,
              axisLine: {
                lineStyle: {
                  color: 'white'
                }
              },
              axisLabel: {
                // interval: 0,
                // rotate: 40,
                textStyle: {
                  fontFamily: 'Microsoft YaHei'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'white'
                }
              }
            }
          ]
          let seriesData = [
            {
              name: '',
              type: 'line',
              itemStyle: {
                normal: {
                  label: {
                    // show: true, //开启显示
                    // position: 'top', //在上方显示
                    textStyle: {
                      //数值样式
                      color: 'white',
                      fontSize: 10
                    }
                  }
                }
              },
              data: need_y1
            }
          ]
          let titleData = {
            text: this.searchInfo.tag + '-类型：' + this.searchInfo.CURTYPE,
            textStyle: {
              fontSize: 18,
              color: '#ffffff'
            }
          }
          // this.option.series[0].data = need_y1
          this.echartDataArray.push({
            xAxis: xData,
            series: seriesData,
            title: titleData
          })
          console.log(this.echartDataArray)
        } else {
          this.loadingPort = false
          this.$message.error('暂无数据')
        }
      } else {
        this.loadingPort = false
        this.$message.error('时间相差不能大于 5 分钟！')
        return
      }
    },
    deleteOne(index) {
      this.echartDataArray.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .el-table thead.is-group th {
  background-color: #152a61;
}
/deep/.is-leaf .cell .el-checkbox {
  display: none;
}
.el-form-item__content .el-button {
  margin: 2px !important;
  padding: 7px 11px;
}
.ColorRed {
  color: red;
}
.echartHeader {
  height: 30px;
  margin-top: 10px;
  margin-bottom: 1px;
  text-align: center;
  background-color: #253f80;
  color: #ffffff;
  font-weight: 900;
  font-size: 17px;
}
.right-box {
  /* height: calc(100vh - 435px);
  max-height: calc(100vh - 435px); */
  height: calc(100vh - 75px);
  max-height: calc(100vh - 75px);
  box-sizing: border-box;
  overflow-y: scroll;
}
.right-box::-webkit-scrollbar {
  display: block;
}
.right-box .el-checkbox {
  display: block;
}
.rm002table .el-table__body-wrapper {
  overflow: auto;
  height: 702px;
  /* height: 342px; */
}
.layout-search-header {
  width: 100%;
  height: 1px;
  background-color: #253f80;
  padding-left: 15px;
  color: #eae8c5;
  line-height: 28px;
  font-size: 0px;
  font-weight: bold;
}

element.style {
  position: absolute;
  left: 0px;
  top: -33px;
  width: 1300px;
  height: 249px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0px;
  margin: 0px;
  border-width: 0px;
}
.layout-search-header {
  width: 100%;
  height: 1px;
  background-color: #253f80;
  padding-left: 15px;
  color: #eae8c5;
  line-height: 28px;
  font-size: 0px;
  font-weight: bold;
}
.customWidth {
  width: 70%;
  margin-left: 300px;
}
.right-box {
  /* height: calc(100vh - 435px);
  max-height: calc(100vh - 435px); */
  height: calc(100vh - 75px);
  max-height: calc(100vh - 75px);
  box-sizing: border-box;
  overflow-y: scroll;
}
.right-box::-webkit-scrollbar {
  display: block;
}
.right-box .el-checkbox {
  display: block;
}
/*//头部css*/
.el-form--inline .el-form-item__label {
  text-align: center;
}
.layout-search .el-form .el-form-item {
  margin-bottom: 5px;
}
.layout-search .el-form .el-form-item .el-form-item__content .el-date-editor {
  margin-bottom: 5px;
}
.layout-search .el-form .el-form-item label {
  color: #eae8c5 !important;
  line-height: 24px;
  margin-top: 10px;
  height: 100px;
}
.layout-search .el-form .el-form-item .el-input__inner {
  background-color: #1a367a;
  width: 125px;
  height: 28px;
  color: #eae8c5;
  font-size: 14px;
}
.right-box {
  /* height: calc(100vh - 435px);
  max-height: calc(100vh - 435px); */
  height: calc(100vh - 75px);
  max-height: calc(100vh - 75px);
  box-sizing: border-box;
  overflow-y: scroll;
}
.right-box::-webkit-scrollbar {
  display: block;
}
.right-box .el-checkbox {
  display: block;
}
.el-col-4 .btn {
  margin: 40px 20px 0 0;
}
.wrap {
  background-color: #1a367a;
}
.layout-search .el-form .el-form-item label {
  color: #eae8c5 !important;
  line-height: 57px;
  margin-top: -27px;
  height: 40px;
}
.echartHeader {
  height: 30px;
  margin-top: 10px;
  margin-bottom: 1px;
  text-align: center;
  background-color: #253f80;
  color: #ffffff;
  font-weight: 900;
  font-size: 17px;
}
.right-box {
  /* height: calc(100vh - 435px);
  max-height: calc(100vh - 435px); */
  height: calc(100vh - 75px);
  max-height: calc(100vh - 75px);
  box-sizing: border-box;
  overflow: auto;
}
.right-box::-webkit-scrollbar {
  display: block;
}
.right-box .el-checkbox {
  display: block;
}
.rm002table .el-table__body-wrapper {
  overflow: auto;
  height: 702px;
  /* height: 342px; */
}
.el-table .cell {
  height: 25px !important;
}
.ipt {
  margin: 0 0 10px 4%;
  width: 80%;
}
span {
  color: #fff;
}
#data-view {
  width: 100%;
  height: 100%;
  color: #fff;
}
#dv-full-screen-container {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
.dv-border-box-10 {
  width: 49%;
  margin: 5px;
  display: inline-block;
}
.dv-border-box-11 {
  width: 100%;
  height: auto;
  padding: 4% 1% 1%;
}
.echartbuto {
  position: absolute;
  right: 100px;
  top: 5px;
  padding: 5px;
  z-index: 999;
}
/* 滚动条样式 */
.test-1::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 10px;
  height: 1px;
}

/*滚动条里面小方块*/
.test-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #931fdc;
}

/*滚动条里面轨道*/
.test-1::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.wzta {
  font-size: 20px;
  margin-top: 10px;
  font-weight: bold;
}
.weizhi {
  text-decoration: none;
  color: #23f721;
}
::v-deep .layout-search .el-form .el-form-item .el-input__inner {
  width: 100%;
}
</style>
